【CSS】flex-flow - フレックスコンテナーの主軸方向と折り返し

CSSのflex-flowプロパティについて解説します。

検証環境

CSS

macOS

14.1

flex-flow

flex-flowは“フレックスコンテナーの主軸方向と折り返し”のプロパティです。

主軸方向と折り返しを一括設定します。

各項目の個別設定はflex-direction、flex-wrapを使用します。

【CSS】flex-wrap - フレックスコンテナーの折り返し

【CSS】flex-flow - フレックスコンテナーの主軸方向と折り返し

基本構文

flex-flow: 主軸方向 折り返し;

サンプル

サンプル１

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    ___ih_hl_start
    flex-flow: row wrap;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width:40%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

プレビュー

サンプル２

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    height: 200px;
    ___ih_hl_start
    flex-flow: column wrap;
    ___ih_hl_end
}
p {
    border: 1px solid black;
    text-align: center;
    width:40%;
}
</style>

<div>
    <p>HTML</p>
    <p>CSS</p>
    <p>JavaScript</p>
    <p>WebBrowser</p>
    <p>Server</p>
</div>

プレビュー